<template>
  <div class="page-index">
    <div class="dev-header">
      <p>{{name}}</p>
      <img src="@/assets/image/line2.png" alt="">
    </div>
    <div class="kl-dv">
      <div class="kl-left"></div>
      <div class="kl-right"></div>
      <div class="dev-toget">
        <div class="item-dv">
          <div>在线产品总数</div>
          <div class="item-hd">
            <div style="color:#0180FB;">43</div>
            <img src="@/assets/image/xiushi.png" alt="">
          </div>
        </div>
        <div class="item-dv" >
          <img style="margin-bottom:-80px;" src="@/assets/image/jiantou2.png" alt="">
        </div>
        <div class="item-dv">
          <div>在线产品OK</div>
          <div class="item-hd">
            <div style="color:#04D6B6;">4</div>
            <img src="@/assets/image/xiushi.png" alt="">
          </div>
        </div>
        <div class="item-dv">
          <img style="margin-bottom:-80px;" src="@/assets/image/jiantou2.png" alt="">
        </div>
        <div class="item-dv">
          <div>在线产品NG</div>
          <div class="item-hd">
            <div style="color:#F3503E;">3</div>
            <img src="@/assets/image/xiushi.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="dv-conent">
     <div class="dv-line">
      <img class="line-start" src="@/assets/image/lihe1.png" alt="">
      <!--
        1.处理换线，2.处理一条线上的
      -->
      <div 
      :class="[(getLineNum>index)?'ft-line':'sd-line']"
      v-for="(item,index) in dataLine" :key="index+'-only'">
      <div class="line-next" @click.stop="goDetail(item)">
        <div class="single-equi" :style="addLineWidth(getLineNum,index,getLineWidth)" >
          <div class="relative">
            <div style="position: absolute;top:3px;left:15px;">设备{{index+1}}</div>
            <img width="64rem"  src="@/assets/image/juxing.png" alt="">
          </div>
          
          <div v-if="item.type==2" style="text-align: center;">
            <div v-if="item.isTimeOut" class="relative">
               <div style="position: absolute;top:3px;left:55px;"><a-icon type="thunderbolt" style="color:red" /></div>
               <img  width="29rem" src="@/assets/image/worker1-2.png" alt="">
             </div>
             <img v-else  width="29rem" src="@/assets/image/worker1.png" alt="">
          </div>

          <div v-if="item.type==1" style="text-align: center;">
             <img v-if="item.isFail" width="64rem"  src="@/assets/image/equi3.png" alt="">
             <div v-else-if="item.isMore" class="relative">
                <img style="position: absolute;top:46px;left:17px;" src="@/assets/image/lihe1.png" alt="">
                <img style="position: absolute;top:46px;left:40px;" src="@/assets/image/lihe1.png" alt="">
                <img width="64rem" src="@/assets/image/equi1.png" alt="">
             </div>
             <div v-else-if="item.isOnly" class="relative">
                <img style="position: absolute;top:46px;left:29px;" src="@/assets/image/lihe1.png" alt="">
                <img width="64rem" src="@/assets/image/equi1.png" alt="">
             </div>
             <img v-else width="64rem"  src="@/assets/image/equi1.png" alt="">
          </div>
        </div>
      </div>
      </div>

       <img style="width:100%;" ref="lineImg" src="@/assets/image/quxian3.png" alt="">
    </div>
     </div>
     <detail-draw ref="detailDraw"></detail-draw>
  </div>
</template>

<script>
import detailDraw from './detailDraw'
import { getThings } from '@/services/monitoring'
export default {
  components:{
    detailDraw
  },
  data(){
    return{
      name:'AF13高配产线',
      lineWidth:0,
      lineHeight:0,
      dataLine:[
        {type:1,isFail:false,isTimeOut:false,isOnly:false,isMore:true},
        {type:2,isFail:false,isTimeOut:false,isOnly:false,isMore:false},
        {type:1,isFail:true,isTimeOut:false,isOnly:false,isMore:false},
        {type:2,isFail:false,isTimeOut:true,isOnly:false,isMore:false},
        {type:1,isFail:false,isTimeOut:false,isOnly:false,isMore:true},
        {type:2,isFail:false,isTimeOut:true,isOnly:false,isMore:false},
        {type:2,isFail:false,isTimeOut:false,isOnly:false,isMore:false},
        {type:2,isFail:false,isTimeOut:false,isOnly:false,isMore:false},
        {type:2,isFail:false,isTimeOut:false,isOnly:false,isMore:false},
        {type:1,isFail:false,isTimeOut:false,isOnly:true,isMore:false},
        {type:1,isFail:false,isTimeOut:false,isOnly:false,isMore:false},
        {type:2,isFail:false,isTimeOut:false,isOnly:false,isMore:false},
        {type:2,isFail:true,isTimeOut:false,isOnly:false,isMore:false},
        {type:2,isFail:false,isTimeOut:false,isOnly:false,isMore:false},

      ]
    }
  },
  computed:{
    getLineWidth(){
      return this.$refs.lineImg?.clientWidth-100;
    },
    getLineNum(){
      return parseInt(this.dataLine.length/2) 
    },
    
  },
  watch:{
    //  lineHeight(newVal){
    //    console.log(newVal)
    //  }
  },
  mounted(){
    this.lineWidth = this.$refs.lineImg.clientWidth-200
    this.lineHeight =parseInt(this.$refs.lineImg.clientWidth/2) 
    this.getInitData()
  },
  methods:{
    async getInitData(){
       await getThings().then(res=>{
         
       })
    },
    addLineWidth(line,idx,lineWidth){
      const gNum = parseInt(this.dataLine.length/3)+1 //一条产线所安排的个数 
      const linewidth = this.lineWidth //一条产线的宽度
      const singleWidth = parseInt(linewidth/gNum/2)
      const ftline = {
          position: 'relative',
          top:0,
          left:0,
        }
        const sdline = {
          position: 'relative',
          top:0,
          right:0,
        }
      if(line>idx){
        ftline.left=(line-(line-idx))*singleWidth+'px'
        return ftline
      }else{
        sdline.right=(line-(2*line-idx))*singleWidth+'px'
        return sdline
      }
       
    },
    goDetail(row){
      this.$refs.detailDraw.open(row)
    }
  }
}
</script>

<style lang="less" scoped>
.page-index{
  color: #fff;
  min-height: 120vh;
  background: #02094E;
  .dev-header{
    position: relative;
    top: 0;
    left: 0;
    >img{
      width: 100%;
    }
    >p{
      text-align: center;
      color: #A4D2FF;
      margin-bottom: -10px;
    }
  }

  .kl-dv{
    position: relative;
    top:0;
    left: 0;
    .kl-left{
      position: absolute;
      top:110px;
      left: 0;
      width: 20%;
      height: 4px;
      border-radius: 9px;
      background-image: linear-gradient(to right, #02094E , #162E88);
    }
    .kl-right{
      position: absolute;
      top:110px;
      right: 0;
      width: 20%;
      height: 4px;
      border-radius: 9px;
      background-image: linear-gradient(to left, #02094E , #162E88);
    }
  }
  .dev-toget{
    width: 58%;
    margin:0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 60px 0 100px;
    .item-dv{
      text-align:center;
      color: #A4D2FF;  
      font-size:9px;
      .item-hd{
        font-size:34px;
        >img{
          margin-top:-70px ;
        }
      }
    }
  }
  .dv-conent{
    width: 90%;
    margin: auto;
    .dv-line{
    position: relative;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    .line-start{
      position: absolute;
      top:-15px;
      left:30px;
    }

    }
    // 第一条
    .ft-line{
      position: absolute;
      top:-5.3rem;
      left:10rem;
      color: #fff;
      .line-next{
        position: relative;
        top:0;
        left:0;
      }
    }
    .sd-line{
      position: absolute;
      bottom:0rem;
      right:10rem;
      .line-next{
        position: relative;
        top:0;
        left:0;
      }
    }
  }
}

.relative{
  position: relative;
  top:0;
  left:0;
}
</style>